<template>
  <div>
    <div class="title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="区域搜索：">
          <el-input v-model="formInline.search" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="warning" @click="add">+新建</el-button>
    <template>
      <el-table
        :data="formList"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="120px"
        >
          <template v-slot="{ $index }">
            <span>{{
              (regionlist.pageIndex - 1) * regionlist.pageSize + $index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="合作商名称"
          width="150px"
        />
        <el-table-column
          prop="account"
          label="账号"
          width="150px"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
          width="170px"
        />
        <el-table-column
          prop="ratio"
          label="分成比例"
          width="170px"
        />
        <el-table-column
          prop="contact"
          label="联系人"
          width="170px"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="170px"
        />
        <el-table-column label="操作" width="400px">
          <template v-slot="{row}">
            <el-button type="text" @click="again(row.id)">重置密码</el-button>
            <el-button type="text">查看详情</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text" style="color:red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="footer" style="margin-top:20px">
      <span class="footerspan">共{{ total }}条记录 第{{ regionlist.pageIndex }}/{{ regionlist.pageIndex }}页</span>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" plain @click="beforepage">上一页</el-button>
          <el-button type="primary" plain @click="next">下一页</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 新增合作商弹框 -->
    <el-dialog :visible.sync="isShowadd" width="700px" title="新增合作商">
      <el-form ref="addForm" :model="addForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="合作商名称" prop="name" style="width:600px">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact" style="width:600px">
          <el-input v-model="addForm.contact" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" style="width:600px">
          <el-input v-model="addForm.phone" />
        </el-form-item>
        <el-form-item label="分成比例" prop="ratio" style="width:600px">
          <el-input-number v-model="addForm.ratio" controls-position="right" style="width:500px" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="账号" prop="account" style="width:600px">
          <el-input v-model="addForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width:600px">
          <el-input v-model="addForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 重置密码弹出框 -->
    <el-dialog
      :visible.sync="isShowagain"
      width="30%"
    >
      <div class="content">
        <span>确定要重置合作商密码吗？</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowagain = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getlist } from '@/api/hezuoshang'
export default {
  data() {
    return {
      isShowdialog: false,
      isShowagain: false,
      isShowadd: false,
      ruleForm: {
        regionName: '',
        remark: ''
      },
      addForm: {
        name: '',
        account: '',
        password: '',
        ratio: '',
        contact: '',
        phone: '',
        mobile: ''
      },
      formList: [],
      tableData: [],
      total: '',
      formInline: {
        search: ''
      },
      regionlist: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: '',
      totalpage: '',
      rules: {
        regionName: [{ required: true, message: '区域名称不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const res = await getlist(this.regionlist)
      console.log(res)
      this.formList = res.currentPageRecords
      this.regionlist.pageIndex = res.pageIndex
      this.regionlist.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalpage = res.totalPage
    },
    onSubmit() {
      console.log('点击了查询')
    },
    add() {
      this.isShowadd = true
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.isShowdialog = false
    },
    beforepage() {
      if (this.regionlist.pageIndex !== 1) {
        this.regionlist.pageIndex--
        this.getregion()
      } else {
        this.$message.warning('已经是第一页')
      }
    },
    next() {
      this.regionlist.pageIndex++
      this.getregion()
    },
    again(id) {
      this.isShowagain = true
    }
  }
}
</script>

<style lang='scss' scoped>
.title{
  background-color: white;
  height: 100px;
  margin-left: 20px;
  .el-input{
    width: 230px !important;
  }
}
.footerspan{
  font-size: 16px!important;
    color: #dbdfe5!important;
}
.el-button{
  margin-right: 30px;
}
.btn{
margin-left: 200px;
}
.content{
  font-size: 18px;
  font-weight:700;
  text-align: center;
}
.dialog-footer{
  display: flex;
  margin-left: 150px;
  margin-bottom: 30px;

}
</style>
